<template>
  <div class="hazard">
    <div style="flex: 1;">
      <el-card shadow="never">

        <el-row class="video-container">
          <div class="workSelect">
            <el-checkbox v-model="checked" @change="loacalHandler">基于普查数据</el-checkbox>
            <el-select v-if="checked" ref="unitSelect"  v-model="workId" size="small" @change="workSelectHandler"
            placeholder="请选择调查任务">
            <el-option v-for="item in workList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          </div>
          <ChatWindow :answerMap="answerMap"/>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import ChatWindow from '@/views/app/components/ChatWindow.vue';
import HazTreeEval from "@/views/app/components/HazTreeEval.vue";
import NTitle from "@/components/NTitle.vue";
import {finishList} from '@/api/investWork';
import {findData} from '@/api/dataSearch';

@Component({
  methods: {},
  components: {HazTreeEval,NTitle,ChatWindow}
})
export default class dataResult extends Vue {
  workId:any = '';
  checked = false;
  workList:any =  {};
  workCodeMap:any={};

  answerMap:any =[
    {
      name:"结合以上信息和内蒙古赤峰巴林右旗实际情况请从洪涝防灾减灾救灾角度详细出预测和调度的方案",
      value:"结合以上信息和内蒙古赤峰巴林右旗实际情况请从洪涝防灾减灾救灾角度详细出预测和调度的方案。还有赤峰河下游<2°(排水不畅)，河段弯曲度达 1.5(易形成涡流)，°黏土占比超 60%(吸水性差，加剧内涝)，暴雨后上升 2.5 米(饱和带扩展)，老哈河右岸 30%堤段为 1990 年前建设(渗漏风险高)，城区 80%,农村仅 35%，近 5年围垦河道面积增加 12%(缩窄行洪断面)，山区达 75%，右岸 30%堤段为 1990 年前建设(渗漏风险高)，城区 80%,农村仅 35%，近 5年围垦河道面积增加 12%(缩窄行洪断面)，山区达 75%。预测和建议里包括本系统出发预警并模拟情景:洪涝风险等级为|级(红色预警)，预测淹没范围为下米游3个苏木(概率>70%)，键影响点为桥段溃堤风险(模拟显示3 小时内决口概率 85%)，建议部署市消防支队(200 人)、武警部队(150人)及邻近盟市支援力量路径规划要避开积水严重路段(如某段道路水深超 1.5米)，优先保障医院、学校撤离，调拨县级仓库 50 台大功率抽水泵(排水能力>5000m3/h)，向受威胁村落发放救生衣 2000 件、救生艇 15 艘。基于 GPS 定位，标记高风险村落，推送撤离路线，加固河右岸堤坝，疏浚河道。农作物受灾面积为玉米 4.5 万亩、水稻 1.2 万亩。推广农业保险,尽快河右岸加固3公里堤坝(抗洪标准提升至百年一遇)，新建智能排水泵站，强制推行河道清淤"
    },
    {
      name:"请结合以上信息和呼伦贝尔陈巴尔虎旗当地情况和从雪灾角度分析出详细的建议和调度建议",
      value:"请结合以上信息和呼伦贝尔陈巴尔虎旗当地情况和从雪灾角度分析出详细的建议和调度建议。还有牧户数量:3200户，牲畜存栏量:牛 12 万头、羊 85 万只,2016 年 11 月雪灾积雪 50cm，8 级大风，棚圈倒塌 200 处，牲畜死亡 3.2 万头，直接损失。2008 年初春雪灾 3.5 亿元,80%道路瘫痪，救援延误 48 小时,草料短缺加剧损失。包括救援路线。建议决策包含以下内容：出发预警并模拟情景:未来7天最低温度约-38°C,阵风风速达24m/s(10级)，持续 20~24 小时,多地积雪深度预计 50-70cm，43%棚圈抗雪压不足、5 个通信盲区嘎查、建议立即启用 50 台除雪车，优先疏通 G332 国道、128名独居牧民(65岁以上)全地形车转移至集中安置点，转移5万头牲畜至抗雪棚圈(优先幼畜、母畜)，预置草料2000 吨、融雪剂 800 吨，分储于3个区域中心仓库，组建“雪灾应急联合指挥部”，整合消防、交通、民政、通信部门，提前5天进入待命状态，建议尽快完成全旗 80%棚圈抗雪压改造，邀参与实战演练，提升自救互救技能"
    },
    {
      name:"请结合以上信息和内蒙古锡林郭勒盟正蓝旗当地情况从草原火灾的角度给分析详细预测和调度建议和救援路线",
      value:"请结合以上信息和内蒙古锡林郭勒盟正蓝旗当地情况从草原火灾的角度给分析详细预测和调度建议和救援路线。还有大风天气频繁，干枯植物连续分布，可燃物载量52 吨/公顷(高火险植被覆盖区)，存在吸烟、春耕烧荒、2021 年春季草原火灾、2019 年高火险期潜在火情,火势可能沿、干枯植被连续分布区蔓延， 请结合以上信息和内蒙古锡林郭勒盟正蓝旗当地情况从草原火灾的角度给分析预测和调度决策建议，包含本系统出发预警并模拟情景:预测火险等级达I级(概率 92%),部署 100名消防员+50台消防车形成隔离带，确保1小时内抵达预测火场、请参考系统路线，疏散以火场为中心，下风向 10公里内的居民点、建议春季实施牧场无人机播种柠条种子，每年春季开展“草原火攻防实战演练强制草原防火隔离带建设(宽度≥500 米)，推荐避难场所西乌旗体育馆（耐火建筑，容纳5000人）和扎赉诺尔区中学等"
    }
]

  categoryCheckHandler(data){
    console.log(data);
  }

  getWorkLit(){
    finishList().then(res =>{
      if(res && res.data){
          this.workList = res.data;
          this.workList.forEach((w:any) =>{
          this.workCodeMap[w.id] = w.code;
        })
      }
    }).catch(e =>{
      console.error(e);
    });
  }

  mounted(){
    this.getWorkLit();
  }

  workSelectHandler(val){
    findData({...this.workId}).then(res =>{
        (this as any).$bus.$emit('data',res.data);
    });
  }

  loacalHandler(val){
    if(val){
      this.workSelectHandler('1');
    }else{
      (this as any).$bus.$emit('data',false);
    }
  }
}
</script>
<style lang="scss" scoped>
.hazard{
  display: flex;
  gap: 2px;
  height: 100vh;
 
  .ha-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .radio-t{
      display: flex;
      align-items: center;
      gap: 6px;
      span{
        font-size: 14px;
      }
    }
  }
}

.workSelect{
   /* 绝对定位在右上角 */
   position: absolute;
  bottom: 200px;          
  right: 10px;       
  z-index: 100;     
  display: flex;    
  align-items: center;
  gap: 8px;          
  background: rgba(255, 255, 255, 0.8); 
  padding: 4px;      
  border-radius: 4px; 
}

.flex-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如果需要的话 */
  height: 100px; /* 或者任何你想要的高度 */
  color: blue;
  font-weight: 1000;

  //background: url(../../assets/image/deepseek.png) center center no-repeat;
 
}
.el-tree-select {
    height: 30px !important; /* 调整为你需要的高度 */
    input{
      height: 30px !important; /* 调整为你需要的高度 */
    }
}
.el-input__inner{
  height: 30px !important; /* 调整为你需要的高度 */
}

::v-deep .el-card .el-card__header {
    padding: 6px 10px !important;
}
::v-deep .el-card__body {
    padding: 0px 5px 0px 5px !important;
}

.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>